<template>
  <el-drawer :visible.sync="dialogVisible" direction="rtl" size="60%">
    <div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="效果图链接：">
          <el-input v-model="form.url" placeholder="输入效果图链接地址" clearable />
        </el-form-item>
      </el-form>
      <vue-qr :config="config" :logoSrc="config.imagePath" :downloadButton="true" :text="form.url" colorDark="green" :size="200"></vue-qr>
    </div>
  </el-drawer>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr
  },
  data() {
    return {
      dialogVisible: false,
      form:{
        url:'',
      },
      config: {
        value: 'https://www.baidu.com', //显示的值、跳转的地址
        imagePath: require('../../../assets/logo.png') //中间logo的地址
      }
    }
  },
  methods: {
    init() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
